<template>
	<view style="color: #DAB082;">
		<view style="margin: 80rpx 30rpx 90rpx; display: flex;align-items: center;justify-content: space-between;">
			<image @click="toBackPage" src="/static/huiy/返回@2x.png" style="width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;">我的会员</text>
			<view style="display: flex;align-items: center;">
				<image src="/static/huiy/组%2014@2x.png" style="width: 26rpx;height: 26rpx;" mode="aspectFit"></image>
				<text style="font-size: 24rpx;margin-left: 11rpx;">会员说明</text>
			</view>
		</view>
		<view style="margin: 89rpx 30rpx 39rpx;padding: 36rpx 0 0 41rpx;box-sizing: border-box; width: 690rpx;height: 239rpx;border-radius: 22rpx;background-image: linear-gradient(to right,#2B282F,#6F6863);display: flex;">
			<view style="position: relative;">
				<image src="/static/huiy/1.png" style="width: 170rpx;height: 90rpx;" mode="aspectFill"></image>
				<text style="font-size: 22rpx;position: absolute;top:35rpx;left: 110rpx;color: #C97121;">V1</text>
			</view>
			<view style="display: flex;flex-direction: column;font-size: 24rpx;line-height: 40rpx;">
				<text style="font-size: 32rpx;font-weight: bold;margin: 30rpx 0 5rpx;">张三</text>
				<text>2021-09-25 到期到期将自动续费</text>
				<text>关闭自动续费></text>
			</view>
		</view>
		<view style="margin: 42rpx 46rpx;display: flex;">
			<view style="display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;">
				<text>月卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥5.00</text>
				<text>折合5.00/月</text>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;margin: 0 14rpx;">
				<text>季卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥30.00</text>
				<text>折合5.00/月</text>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;">
				<text>年卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥40.00</text>
				<text>折合5.00/月</text>
			</view>
		</view>
		<view >
			<text style="font-size: 42rpx;display: flex;justify-content: center;">会员尊享权益</text>
			<uni-grid :column="4" :showBorder="false" style="margin-top: 36rpx;">
				<uni-grid-item v-for="(item,index) in 4" :key="index">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<image src="/static/huiy/11.png" style="width: 84rpx;height: 84rpx;" mode=""></image>
						<text style="font-size: 26rpx;margin: 10rpx 0 5rpx;">免运费</text>
						<text style="font-size: 20rpx;color: #686878;">每月福利</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="4" :showBorder="false" style="margin-top: 36rpx;">
				<uni-grid-item v-for="(item,index) in 4" :key="index">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<image src="/static/huiy/11.png" style="width: 84rpx;height: 84rpx;" mode=""></image>
						<text style="font-size: 26rpx;margin: 10rpx 0 5rpx;">免运费</text>
						<text style="font-size: 20rpx;color: #686878;">每月福利</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			toBackPage(){
				uni.navigateBack({
				    delta: 1,
				    animationType: 'pop-out',
				    animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #31281F;
}
</style>
